<template>
	<view id="photo-viewer-container">
		<view id="photo-viewer" ref='photoViewer'></view>
	</view>
</template>

<script>
    import { Viewer as PhotoSphereViewer } from 'photo-sphere-viewer';
	import { EVENTS, Marker, MarkerProperties, MarkerType, MarkersPlugin, MarkersPluginOptions, SelectMarkerData } from 'photo-sphere-viewer/dist/plugins/markers'
	import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
	import 'photo-sphere-viewer/dist/plugins/markers.css';
	export default {
		props:{
			//标题
			title:{
				type:String,
				default:""
			},
			//展示的图片
			imgs:{
				default:()=>{
					return require("@/static/photo-viewer/sphere_small.jpg")
				}
			},
			//加载动画
			loading:{
				default:()=>{
					return require("@/static/photo-viewer/photosphere-logo.gif")
				}
			},
			//是否开启标点
			isMark:{
				type:Boolean,
				default:false
			},
			//标点配置
			markOption:{
				type:Object,
				default:()=>{
					return {
						size:1,
						icon:require("@/static/photo-viewer/pin-red.png"),
						selectIcon:require("@/static/photo-viewer/pin-blue.png"),
					}
				}
			}
		},
		data() {
			return {
				isMarkDefault:this.isMark,//标记开关
				PSV:null,//全景图
				markers:null,//标记对象
				currentMark:null//当前标记
			}
		},
		mounted(){
			this.$nextTick(() =>{
				this.inits()
			})
		},
		methods: {
			inits(){
				console.log( this.$refs.photoViewer)
				let _this = this
				//初始化参数
				let options = {
					container : this.$refs.photoViewer.$el,
					panorama  : this.imgs,
					caption   : this.title,
					loadingImg: this.loading,
					navbar: [//底部工具栏
					    'autorotate',//自动视角
					    'caption',//标题
					    'fullscreen'//全屏
					]
				};
				//标记按钮
				if(this.isMarkDefault){
					options['navbar'].splice(1,0,{
						id: 'mark-btn-open',
						content: '<img src="'+require("@/static/photo-viewer/mark-open.png")+'" style="width:20px"/>',
						title: '定位',
						className: 'mark-button-open',
						onClick: () => {
							let btnOpen = this.PSV.navbar.getButton('mark-btn-open')
							let btnClose = this.PSV.navbar.getButton('mark-btn-close')
							_this.isMarkDefault = false
							btnOpen.toggle() 
							btnClose.toggle()
						}
					},{
						id: 'mark-btn-close',
						content: '<img src="'+require("@/static/photo-viewer/mark-close.png")+'" style="width:20px"/>',
						title: '定位',
						visible:false,
						className: 'mark-button-close',
						onClick: () => {
							let btnOpen = this.PSV.navbar.getButton('mark-btn-open')
							let btnClose = this.PSV.navbar.getButton('mark-btn-close')
							_this.isMarkDefault = true
							btnOpen.toggle()
							btnClose.toggle()
						}
					})
					
					options['plugins'] = [
						[MarkersPlugin, { markers: []}]
					]
				}
				this.PSV = new PhotoSphereViewer(options)
				this.markers = this.PSV.getPlugin(MarkersPlugin)
				this.PSV.on('click', (e, data) => {_this.addMark(e, data)})
				this.markers.on('select-marker', function (e, marker, data) {_this.markClick(e, marker, data)});
			},
			/* 添加图标 */
			addMark(e,data){
				if(!this.isMarkDefault){
					return
				}
				if (!data.rightclick && this.markers.getMarkers().length < this.markOption.size) {
				  this.markers.addMarker({
				    id       : '#' + Math.random(),
				    tooltip  : 'Generated marker',
				    longitude: data.longitude,
				    latitude : data.latitude,
				    image    : this.markOption.icon,
				    width    : 32,
				    height   : 32,
				    anchor   : 'bottom center',
				    data     : {
				      deletable: true,
				    },
				  });
				}else if(!data.rightclick && this.currentMark != null){
					this.markers.updateMarker({
					  id       : this.currentMark,
					  longitude: data.longitude,
					  latitude : data.latitude,
					});
				}
			},
			/* 图标点击事件 */
			markClick(e, marker, data){
				if (marker.data && marker.data.deletable) {
					if (data.dblclick) {
						this.markers.removeMarker(marker)
						this.currentMark = null
					}else{
						this.currentMark = this.markers.getCurrentMarker()
						this.markers.updateMarker({
							id   : marker.id,
							image: this.markOption.selectIcon,
						})
					}
				}
			},
			getMarks(){
				return this.markers;
			},
			getCurrentMark(){
				return this.currentMark;
			}
		}
	}
</script>

<style lang="scss" scoped>
	#photo-viewer-container{
		width: 100%;
		height: 100%;
		overflow: hidden;
		#photo-viewer{
			width: 100%;
			height: 100%;
		}
	}
</style>